

// 留言板  父组件  Todolist2
// 提交留言  PostMsgCom   子组件 
// 显示留言 (删除和修改)  ShowMsgCom   子组件 
// Ajax 


import React, { Component } from 'react';
import { ajax } from './../utils/ajax';
class Todolist3 extends Component {
    state = {
        list:[
          
        ]
    }

    async getList(){
        let res = await ajax.post("http://localhost:3000/api/commentlist")
        if(res.data.code==200){
            this.setState({
                list:res.data.result 
            })
        }
    }

    componentDidMount(){
        this.getList()
        // .then(res=>{
        //     console.log(res)
        //     this.setState({
        //         list:res.data.result 
        //     })
        // })
    }

     addToList= async (title,content)=>{
        // this.state.list.push({
        //     title,
        //     content
        // })
        // this.setState({
        //     list:this.state.list 
        // })
        let {data} = await ajax.post("http://localhost:3000/api/commentadd",{
            title,
            content 
        })
        this.getList()
    }

    deleteOne= async (l,i)=>{
        let {data} = await ajax.post("http://localhost:3000/api/commentdelete",{_id:l._id })
        if(data.code==200){
            this.state.list.splice(i,1)
            this.setState({
                list:this.state.list 
            })
        }
    }

    updateOne = async (l,i)=>{
        let {data} = await ajax.post("http://localhost:3000/api/commentupdate",l);
        if(data.code == 200){
            this.state.list.splice(i,1,l)
            this.setState({
                list:this.state.list 
            })
        }
    }
    render() {
        const {list} = this.state
        return (
            <div>
                <h2>React 实现简单 的 留言板 - Demo3    </h2>
                <ShowMsgCom list={list} deleteOne={this.deleteOne} updateOne={this.updateOne}  />
                <PostMsgCom addToList={this.addToList}/>
            </div>
        );
    }
}

class ShowMsgCom extends Component{
    deleteOne=(l,i)=>{
        this['item'+i].className = 'zoomOutDown'
        setTimeout(()=>{
            this.props.deleteOne(l,i)
            this['item'+i]&&(this['item'+i].className = 'item')
        },799)
    }

    updateOne=(l,i)=>{
        let value = window.prompt(l.title,l.content)
        console.log(value)
        if(value && value!=l.content){
            this['item'+i].className = 'tada'
            l.content = value;
            this.props.updateOne(l,i)
            setTimeout(()=>{
                this['item'+i].className = 'item'  
            },500)
        }
    }
    render(){
        const {list} = this.props 
        return (
            <div style={{padding:10, margin:'20px auto',width:'92%',border:'1px solid green',borderRadius:10,minHeight:150}}>
                <h2 style={{textAlign:'center'}}>展示留言</h2>
                <div className='list'>
                    {
                        list.map((l,i)=>(
                            <div className="item zoomInDown" ref={el=>this['item'+i]=el  }   key={i} style={{ animationDelay:i*0+'ms', marginTop:10,borderBottom:'1px solid #eee'}}>
                                <p>序号: {i+1}</p>
                                <p>标题: {l.title}</p>
                                <p>内容: {l.content}</p>
                                <p>
                                    <button onClick={()=>this.deleteOne(l,i)}>删除</button>
                                    <button onClick={()=>this.updateOne(l,i)}>修改</button>
                                </p>
                            </div>
                        ))
                    }
                </div>
            </div>
        )
    }
}


class PostMsgCom extends Component{
    addToListPost=()=>{
        var title = this.title.value;
        var content  = this.content.value; 
        if(title&&content){
            // unshift 动画无效 
            this.props.addToList(title,content)
            this.title.value = ''
            this.content.value = ''
        }else{
            alert("请输入数据")
        }   
        
    }
    render(){
        
        return (
            <div style={{padding:10, margin:'20px auto',width:'92%',border:'1px solid red',borderRadius:10,minHeight:150}}>
                <h2 style={{textAlign:'center'}}>添加留言</h2>
                <div>
                    <p>
                        <input type="text" ref={el=>this.title=el} placeholder="请输入标题" />
                    </p>
                    <p>
                        <input type="text" ref={el=>this.content=el} placeholder="请输入内容" />
                    </p>
                    <p>
                        <button onClick={this.addToListPost }>添加</button>
                    </p>
                </div>
            </div>
        )
    }
}

export default Todolist3;
